<!DOCTYPE html>
<html>
<head>
	<title>事件流</title>
</head>
<body>
	<!-- 事件流

		事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）
		事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
	 -->

	<!-- 添加事件处理程序的方法

		1、HTML 事件处理程序
		2、DOM 0级事件处理程序：较传统的方式：把一个函数赋值给一个事件的处理程序属怕
		3、DOM 2级事件处理程序：
			dom 2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作
			addEventListener() 和 removeEventListner()
			接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值
	 -->

	<div id="box">
		<!-- HTML 事件 -->
		<input type="button" value="按钮" id="btn" onclick="showMes">

		<!-- DOM 0级事件 -->
		<input type="button" value="按钮2" id="btn2">

		<!-- DOM 2级事件 -->
		<input type="button" value="按钮3" id="btn3">
	</div>

	<script type="text/javascript">
		// html 事件
		function showMes(){
			alert('hello world');
		}

		// dom 0级事件
		var btn2 = document.getElementById('btn2');
		btn2.onclick = function(){
			alert('这是通过 DOM 0级添加的事件！');
		}
		//删除 onclick 属性
		// btn2.onclick = null;


		// DOM 2级事件
		var btn3 = document.getElementById('btn3');
		btn3.addEventListener('click', showMes, false);
		btn3.addEventListener('click', function(){
			alert(this.value);
		}, false);

		var eventUtil = {
			addHandler:function(element, type, handler){
				if(element.addEventListener){
					element.addEventListener(type, handler, false);
				}else if (element.attachEvent) {
					element.attachEvent('on'+type, handler);
				}else{
					// element[value] === element.value
					element['on'+type] = handler;
				}
			}
		}

	</script>

</body>
</html>